<template>
	<view class="t-message">
		<block v-if="messageList && messageList.length > 0">
			<view v-for="item in messageList" :key="item.userId" @click="goReadDetail(item)" class="t-message-item t-base-card">
				<view class="t-message-avatar">
					<image v-if="item.userId == 0" src="../../static/imgs/sysmsg.png"></image>
					<image v-else :src="handleImagePath(item.userAvatar)"></image>
				</view>
				<view class="t-message-content">
					<view class="t-message-content-name">{{ item.userId == 0 ? '系统通知' : item.userName }}</view>
					<view class="t-message-content-whisper tcr-ellipsis">{{ item.rows[item.rows.length - 1].msgContent }}</view>
					<view class="t-pointer">{{ item.noReadCount }}</view>
				</view>
			</view>
		</block>
		<view v-else class="t-blank">
			<image src="../../static/imgs/empty.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'message',
		data() {
			return {
				messageList: [],
			}
		},
		onShow() {
			this.loadMessage();
		},
		methods: {
			loadMessage() {
				// 从缓存中获取历史消息数据
				let message = uni.getStorageSync('message');
				if (!message) {
					message = {};
					message.lastId = 0;
					message.messageList = [];
				}
				this.$http.get({
					url: this.$apis.getUserMessage,
					data: {
						id: message.lastId,
					}
				}).then(res => {
					console.log(res, '调用接口成功');
					if (res.code === 200 && res.data.length > 0) {
						const arr = res.data.sort((x, y) => x.id - y.id);
						let maxId = message.lastId;
						arr.forEach(item => {
							item.readFlag = false;
							const itemObj = message.messageList.filter(x => x.userId === item.userId);
							if (itemObj && itemObj.length === 1) {
								const obj = itemObj[0];
								// 将消息保存到列表里
								if (!obj.rows) {
									obj.rows = [];
								}
								obj.rows.push(item);
								obj.lastMsgId = item.id;
								// 统计未读数量
								const arr = obj.rows.filter(x => !x.readFlag);
								if (arr) {
									obj.noReadCount = arr.length;
								}
							} else {
								const nObj = {
									userId: item.userId,
									userName: item.userName,
									userAccount: item.userAccount,
									userAvatar: item.userAvatar,
									noReadCount: 1,
									lastMsgId: item.id,
									rows: [item]
								}
								message.messageList.push(nObj);
							}
							if (item.id > maxId) {
								maxId = item.id
							}
						});
						// 其他操作
						message.lastId = maxId;
						// 重新缓存数据
						uni.setStorageSync('message', message);
					} else {
						// 不需要处理
					}
					// 刷新页面数据
					this.messageList = message.messageList;
				}).catch(err => {
					// 刷新页面数据
					this.messageList = message.messageList;
					console.log('调用接口失败：', err);
				})
			},
			goReadDetail(row) {
				uni.navigateTo({
					url: '/pages/read/read?userId=' + row.userId
				});
			}
		}
	}
</script>

<style lang="scss">
	.t-message {
		background-color: #f1f1f1;
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		overflow-y: auto;
		
		&-item {
			display: flex;
			
			.t-message-avatar {
				width: 120rpx;
				
				> image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
			
			
			.t-message-content {
				margin-left: 30rpx;
				flex: 1;
				width: 0;
				display: flex;
				flex-flow: column;
				justify-content: center;
				position: relative;
				
				&-name {
					font-size: 32rpx;
					color: #333333;
					line-height: 40rpx;
				}
				
				&-whisper {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}
				
				.t-pointer {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					font-size: 24rpx;
					background-color: #ff0000;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #ffffff;
					border-radius: 50%;
				}
			}
		}
		
		.t-blank {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80vh;
			
			>image {
				width: 400rpx;
				height: 300rpx;
			}
		}
	}
</style>